<template>
  <div>
    <!-- 搜索框 -->
    <div class="tableSearch">
      <el-form size="mini">
        <el-form-item label="" label-width="0">
          <el-input v-model="selectData.keyword" placeholder="请输入协议编号或协议名称" style="width:200px;"></el-input>
        </el-form-item>

        <el-form-item label="协议类型：" label-width="100px">
          <el-select v-model="selectData.agreementType" placeholder="请选择">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="(item, index) in agreementTypeArr" :key="index" :label="item" :value="index"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="协议状态：" label-width="100px">
          <el-select v-model="selectData.status" placeholder="请选择">
            <el-option label="全部" value=""></el-option>
            <el-option v-for="(item, index) in statusArr" :key="index" :label="item" :value="index"></el-option>
          </el-select>
        </el-form-item>

        <el-form-item label="" label-width="15px">
          <el-button type="primary" @click="_handleSearch()">搜索</el-button>
        </el-form-item>

        <!-- 不能创建同步协议 -->
        <el-form-item label="" label-width="50px">
          <el-button type="primary" v-if="isLogin===0" @click="_handleAdd()">添加采购价格协议</el-button>
        </el-form-item>
      </el-form>
    </div>

    <!-- 表格 -->
    <div class="tableMain">
      <el-table :data="tableData">
        <el-table-column prop="agreementCode" label="协议编号" align="center"></el-table-column>
        <el-table-column prop="agreementName" label="协议名称" align="center"></el-table-column>
        <el-table-column prop="agreementType" align="center" label="协议类型">
          <template slot-scope="scope">
            <span>{{agreementTypeArr[scope.row.agreementType]}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="status" align="center" label="协议状态">
          <template slot-scope="scope">
            <span>{{statusArr[scope.row.status]}}</span>
          </template>
        </el-table-column>
        <el-table-column prop="startDate" align="center" label="协议开始时间"></el-table-column>
        <el-table-column prop="endDate" align="center" label="协议结束时间"></el-table-column>
        <el-table-column align="center" label="操作" width="180">
          <template slot-scope="scope">
            <el-button size="mini" @click="_handleCheck(scope.row.id, scope.row.agreementType, scope.row.status)" type="text">查看</el-button>
            <!-- 待确认/已过期不显示删除 -->
            <el-button size="mini" @click="_handleDelete(scope.row.id)" v-if="scope.row.agreementType ==0 && scope.row.status != 0 && scope.row.status != 4" type="text" class="delete">删除</el-button>
          </template>
        </el-table-column>
      </el-table>

      <!-- 页码 -->
      <page-unit :pageData="pageData" :func="_listOrderPriceAgreement"></page-unit>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";
import u from "@/util";
import pageUnit from "components/Page";
import {
  ListOrderPriceAgreement,
  deleteOrderPriceAgreement
} from "@/api";

export default {
  computed: mapState(["sub", "power", "merchantId"]),
  components: { pageUnit },

  data () {
    return {
      supplierId: '',  // 供应商id
      supplierName: '',  // 供应商名称
      isLogin: '',  // 供应商是否入驻
      tableData: [],
      pageData: {
        pageSize: 20,
        pageNum: 1,
        currentPage: 1,
        totalItems: 0
      },
      selectData: {
        keyword: '',
        agreementType: '',  // 协议类型
        status: ''  // 协议状态
      },
      agreementTypeArr: ['自建', '同步'],  // 协议类型
      statusArr: ['待确认', '已拒绝', '未生效', '已生效', '已过期'],  // 协议状态
    }
  },

  created () {
    this.supplierId = u.getQuery().supplierId
    this.supplierName = u.getQuery().supplierName
    this.isLogin = Number(u.getQuery().isLogin)
  },

  mounted () {
    this._listOrderPriceAgreement(this.pageData.pageSize, 1)
  },

  methods: {
    // 获取价格协议列表
    _listOrderPriceAgreement (pageSize, pageNum) {
      ListOrderPriceAgreement({
        pageSize: pageSize,
        pageNum: pageNum,
        customerId: this.merchantId,  // 客户ID
        supplierId: this.supplierId,
        agreementType: this.selectData.agreementType,
        status: this.selectData.status,
        keyword: this.selectData.keyword
      }).then(res => {
        this.tableData = res.data.list
        this.tableData.forEach(i => {
          i.startDate = u.foryear(i.startDate)
          i.endDate = u.foryear(i.endDate)
        })
        this.pageData.totalItems = res.data.pageTotal
      })
    },

    // 搜索
    _handleSearch () {
      this._listOrderPriceAgreement(this.pageData.pageSize, 1)
    },

    // 新增
    _handleAdd () {
      u.routerTo("/operate-management/supplier-management/supplier-supplierMg/supplier-PurchaseAdd", { 
        supplierId: this.supplierId, 
        supplierName: this.supplierName 
      })
    },

    // 查看
    _handleCheck (id, agreementType, status) {
      u.routerTo("/operate-management/supplier-management/supplier-supplierMg/supplier-PurchaseLook", { 
        id: id,   // 协议id
        agreementType: agreementType,   // 协议类型
        status: status,   // 协议状态
        supplierId: this.supplierId,   // 供应商id
        supplierName: this.supplierName,   // 供应商名称
        isLogin: this.isLogin   // 是否入驻
      });
    },

    // 删除价格协议
    _handleDelete (id) {
      this.$confirm("确定要删除吗?", "提示", {
        center: true,
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        closeOnClickModal: false,
        closeOnPressEscape: false
      }).then(() => {
        deleteOrderPriceAgreement({
          agreementId: id
        }).then(res => {
          this._listOrderPriceAgreement(this.pageData.pageSize, 1)
        })
      }).catch(() => {
        this.$message({
          type: "info",
          message: "已取消删除"
        });
      });
    }
  }
};
</script>
